<template>
<div class='page'>
  <div class='nav'>
    <div class="input_view flex_ac" @click="$back() ">
      <van-icon class="ml6" name="arrow-left" size="26" color="#000"/>
      <div class="nav_title">门店详情</div>
      <img class="mla mr10" width="22px" height="22px" src="~@/assets/img/product/share.png" alt="">
    </div>
	</div>
  <div class="h40"></div>
  <div class="list_item">
    <div class="flex">
      <div class="img_div">
        <img class="item_img" :src="data.imgs" />
      </div>
      <div class="info_div">
        <div class="flex_sb flex_ac">
          <div class="info_name">{{ data.name }}</div>
          <img class="mr10" width="15px" height="15px" src="~@/assets/img/product/sc.png" alt="">
        </div>
        <div class="info_desc mt6"><span v-for="i,k in data.type_names"><span v-if="k!==0">|</span>{{ i }} </span> </div>
        <!-- <div class="flex_ac mt6">
          <div class="yh">优惠</div>
          <div class="add">{{ data.address }}</div>
        </div> -->
      </div>
    </div>
    <div class="add1 mt20">
      <div>{{ data.address }}</div>
      <img class="p1" src="~@/assets/img/product/add.png" alt="">
      <a :href="'tel:' + data.tel"> <img class="p2" src="~@/assets/img/product/phone.png" alt=""></a>
    </div>
  </div>
  <div class="list_item">
    <div class="info_name ml10">公司简介</div>
    <!-- <div class="info_name1 ml10 mt10">买单立减</div> -->
    <div class="flex_sb flex_ac mt2 ml10 mr10">
      <div class="info_desc " v-html="data.desc"></div>
      <!-- <div class="see_btn">查看更多</div> -->
    </div>
    <div class="info_name ml10 mt20">产品介绍</div>
    <div class="info_desc ml10 mr10 mt10">
      <div v-html="data.product_desc"></div>
      <!-- “早安巴黎”是跨国集团公司香港亚蔓有限公司的品牌。早
      安巴黎BonMatin定位大众可接受的高端精细品牌。
      BonMatinParis是源自于法国巴黎的烘培专门店，以烘
      焙师在黎明破晓之初准备揉面开工，得以此名。 -->
    </div>
  </div>
</div>
</template>
<script>
import { shop } from '@/api/api.js'
export default {
  data() {
    return {
      data:{},
    }
  },
  components: {
   
  },
  created() {
    this.id = this.$route.query.id
    this.getDetail(this.id)
  },
  watch: {
    
  },
  methods: {
    getDetail(id){
				this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
				shop.getDetail({id}).then(res=>{
          res.data['type_names']=res.data.type_names.split(',')
					this.data = res.data
					this.$toast.clear()
				})
			},
  }
}
</script>
<style lang="scss" scoped>
.nav{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
  height: 40px;
	background-color: rgba($color: #fff, $alpha: 1);
	z-index: 10;
	transition: all 0.5s;
}
.input_view{
	width: 100%;
  height: 100%;
	.nav_title{
		font-weight: 500;
		font-size: 18px;
		color: #000;
	}
}

.page{
	height:100%;
	width:100%;
	background: #F4F4F4;;
	overflow:auto
}

.list_item{
  margin: 5px;
  padding: 20px 0;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px 0px rgba(250,135,30,0.15);
  border-radius: 3px;
  .img_div{
    min-width: 67px;
    max-width: 67px;
    height: 67px;
    background: #FA871E;
    box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.15);
    border-radius: 3px;
    margin: 0 10px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .info_div{
    width: calc(100% - 90px);
    overflow: hidden;
  }
  .info_name{
    font-weight: bold;
    font-size: 15px;
    color: #000000;
  }
  .info_name1{
    font-size: 14px;
    color: #000000;
  }
  .info_desc{
    font-size: 13px;
    color: #666666;
    span{
      display: inline-block;
      margin: 0 6px;
    }
  }
  .see_btn{
    width: 70px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #FA871E;
    border-radius: 13px;
    font-size: 13px;
    color: #FFFFFF;
  }
  .yh{
    height: 18px;
    background: #FCEFE4;
    border-radius: 3px;
    line-height: 18px;
    padding:  0 6px;
    font-size: 12px;
    color: #FA871E;
    margin-right: 8px;
  }
  .add{
    font-size: 12px;
    color: #999999;
  }
  .add1{
    font-size: 13px;
    color: #000000;
    line-height: 18px;
    position: relative;
    div{
      width: calc(100% - 120px);
      padding-left: 10px;
    }
    .p1{
      position: absolute;
      right: 60px;
      bottom: 2px;
      height: 15px;
      width: 15px;
    }
    .p2{
      position: absolute;
      right: 20px;
      bottom: 2px;
      height: 15px;
      width: 15px;
    }
  }
}
</style>